<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/jquery.form.min.js"></script>
    <style>
        #register {
            width: 50%;
            height: 300px;
            margin: 0 auto;

            .left {
                float: left;
                width: 60%;
                height: 600px;
                background-color: white;
                .require {
                    color: red;
                }
                h2,p {
                    text-align: center;

                    #sub_btn {
                        background-color: #ff7a21;
                        color: white;
                    }
                }
                text-align: center;
                textarea {
                    /* text-align: center; */
                    width: 90%;
                }
            }

            .right {
                float: right;
                width: 40%;
                background-color: #f5f5f5;
                h3,p {
                    margin-left: 20px;
                }
                .title {
                    color: #0370b6;
                }
                div {
                    text-align: center;
                }
            }

        }
    </style>
</head>

<body>
    <div id="new_header">
        <script>
            $("#new_header").load("header.html");
        </script>
    </div>

    <!-- 正文部分 -->
    <div id="main">
        <!-- 注册部分 -->
        <div id="register">
            <div class="left">
                <h2>注册</h2>
                <form id="form-reg" action="UserServlet" method="post">
                    <input type="text" name="methodName" value="register" hidden>
                    <p>用户名：&nbsp;&nbsp;&nbsp;<input type="text" placeholder="请输入用户名" 
                        name="userName" onblur="validateForm(0)">
                        <span class="require">*必填字段</span> <br>
                    </p>
                    <p>登陆密码：<input type="password" placeholder="请输入密码" 
                        name="password" onblur="validateForm(1)">
                        <span class="require">*密码必须是6到18位数字</span> <br>
                    </p>
                    <p>确认密码：<input id="pwd2" type="password" placeholder="请输入确认密码"
                        onblur="validateForm(2)">
                        <span class="require">*两次输入密码不一致</span> <br>
                    </p>
                    <p>联系方式：<input type="tel" placeholder="请输入联系电话" 
                        name="phone" onblur="validateForm(3)">
                        <span class="require">*电话号码必须是11位</span> <br>
                    </p>
                    <p>真实姓名：<input type="text" placeholder="请输入真实姓名" 
                        name="realName" onblur="validateForm(4)">
                        <span class="require">*必填字段</span> <br>
                    </p>
                    <p>身份证号：<input type="text" placeholder="请输入身份证号" 
                        name="idNumber" onblur="validateForm(5)">
                        <span class="require">*请输入有效的身份证号</span> <br>
                    </p>
                    <p>所属地：
                        <select name="belongPlace">
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="重庆">重庆</option>
                        </select><br>
                    </p>
                    <p><input id="ckbx" type="checkbox" onblur="validateForm(6)">愿意接受中国梦想游会员协议
                        <span class="require" hidden>*必选</span> <br>
                    </p>
                    <p><input id="sub_btn" type="submit" value="同意协议并注册"></p>
                </form>

                <textarea rows="10" readonly="true">                     中国梦想游会员协议
一、服务条款

中国梦想游提供的服务将完全按照其发布的使用协议,服务条款和操作规则严格执行。为获得中国梦想游服务,服务使用人(以下称会员”)应当同忘本协议的全部条款并按照页面上的提示完成全部的注册程序。

二、目的
            </textarea>
            </div>
            <div class="right">
                <h3>为什么选择中国梦想游</h3>
                <p class="title">¥低价、放心</p>
                <p>低价保证、无零负团趣、无特殊附加费、9大出游保障。</p>
                <p class="title">产品丰富</p>
                <p>8万+旅游产品,涵盖跟团、自助、自驾、邮轮、公司游等,总有一款适合您。</p>
                <p class="title">300万游客的选择</p>
                <p>黑计服务300万人次,60万真实点评,2万原创游记。</p>
                <p class="title">G24 更多服务</p>
                <p>全国15个出发城市,7X24小时服务</p>
                <div><img src="imgs/logo1.png"></div>
            </div>
        </div>
    </div>
    <script>
        // $(function ())是文档document加载完自动调用的函数
        $(function () {
            /*
            获取form元素，调用其ajaxForm(...)方法
            内部的function(data)的data就是后台返回的数据
            */
            $("#form-reg").ajaxForm(function (data) {
                    console.log(data);
                    alert(data);
                }
            );
        });

        var spanList = $("#form-reg p span");
        for(var i=0; i<spanList.length; i++){
            spanList[i].hidden = true;
        }

        function validateForm(i){
            var valid = true;
            if(i===0){
                var username=document.forms["form-reg"]["userName"].value;
                if (username==null || username==""){
                    valid = false;
                }
            }else if(i===1){
                var password=document.forms["form-reg"]["password"].value;
                var re = /^[0-9]{6,18}$/;
                if(password==null || password=="" || !re.test(password)){
                    valid = false;
                }
            }else if(i==2){
                var password=document.forms["form-reg"]["password"].value;
                var password2=$("#pwd2").val();
                if(password != password2)
                    valid = false;
            }else if(i==3){
                var phone=document.forms["form-reg"]["phone"].value;
                var re = /^[0-9]{11}$/;
                if(!re.test(phone))
                    valid = false;
            }else if(i==4){
                var realname=document.forms["form-reg"]["realName"].value;
                if(realname=="") valid = false;
            }else if(i==5){
                var re = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                var idNumber = document.forms["form-reg"]["idNumber"].value;
                if(!re.test(idNumber)) valid = false;
            }else if(i==6){
                if($("#ckbx").prop("checked")){
                    valid = true;
                }else{
                    valid = false;
                }
            }

            if(valid){
                $("#form-reg p span")[i].hidden=true;
            }else{
                $("#form-reg p span")[i].hidden=false;
            }
        }
    </script>
</body>

</html>